
import PlayGroundCanvas,{currentGridInfo} from "./playground/backgroundCanvas";
import StructElement,{ElementLocationSizeMap} from "./StructElement/StructElement"
import ToolBar from "./toolBar/toolBar"
import GridConf from "@/core/GridConf";
import Scale from "./scale/Scale";
import $Element from "@/core/Element";
import Preview from "./preview/preview"
import PlaygroundSetting from "./playgroundSetting/playgroundSetting";
export default function desingerCreater(container: HTMLElement,widthGridNum:number=12, heightGridNum:number=12) {
        GridConf.widthGridNum = widthGridNum || 12;
        GridConf.heightGridNum = heightGridNum || 12;
        const currentPlayGround =new PlayGroundCanvas(container);
        const structElement = new StructElement(container,currentPlayGround,3,3,4,3);
        const moveTarget = structElement.getElement();
        const leftMenuContainer = document.getElementById("left-menu") || document.createElement("div");
        const toolBar = new ToolBar(leftMenuContainer);

        const scaleTool = new Scale(new $Element(".inner-body-container"));
        scaleTool.addClassName("scale-tool");
        scaleTool.changePlaygroundSize((width:number,height:number)=>{
            console.log(width,height);
            currentPlayGround.setPlaygroundSize(width,height)
        })
        const previewButton = new Preview(container);
        const playgroundSettingBar = new PlaygroundSetting(new $Element(".inner-body-container"));
        playgroundSettingBar.setButtons(["ColorPicker"]);
        // previewButton.render();
        document.getElementById("getconf-button")?.addEventListener("click",function(){
            console.log(Array.from(ElementLocationSizeMap.values()));
        });

}



